<template>
  <div class="app-container">
    <div class="formDiv">
      <el-form ref="form" :inline="false" label-width="130px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="用户姓名/手机">
              <el-input placeholder="用户姓名/手机" v-model="params.username"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单编号">
              <el-input placeholder="订单编号" v-model="params.order_sn"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属模块">
              <el-select v-model="params.module_id" clearable placeholder="请选择">
                <el-option v-for="(item, index) in opts" :key="index" :label="item" :value="index" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="机构名称">
              <el-input placeholder="机构名称" v-model="params.org_name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="推荐人姓名/手机">
              <el-input placeholder="推荐人姓名/手机" v-model="params.referee"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="服务商级别">
              <el-select v-model="params.role_id" clearable placeholder="请选择">
                <el-option v-for="(item, index) in role" :key="index" :label="item" :value="index" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单状态">
              <el-select v-model="params.pay_status" clearable placeholder="请选择">
                <el-option v-for="(item, index) in pay" :key="index" :label="item" :value="index" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="报单类型">
              <el-select v-model="params.order_source" clearable placeholder="请选择">
                <el-option
                  v-for="(item, index) in order_source"
                  :key="index"
                  :label="item"
                  :value="index"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="核销时间">
              <el-date-picker
                v-model="dates"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="购买时间">
              <el-date-picker
                v-model="dates1"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-button style="margin-left:60px" type="primary" @click="search">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <tablecomponent ref="table" :total="total" :tableData="tableData" :head="head"></tablecomponent>
  </div>
</template>

<script>
import { server_project_index } from "@/api/membershipCard";
export default {
  name: "",
  data() {
    return {
      dates: "",
      dates1: "",
      opts: {
        2: "华悦口腔（口腔）",
        3: "华视优选（眼科）",
        4: "美分享PLUS（医美）"
      },
      pay: {
        // 0: "未支付",
        1: "已支付",
        2: "申请退款",
        3: "已退款"
      },
      role: {
        // 1: "普通用户",
        2: "普通经销商",
        3: "高级经销商",
        7: "总监",
        8: "总经理"
      },
      order_source: {
        0: "线上定金",
        1: "线上全款",
        2: "线下全款",
        3: "线下报单"
      },
      params: {},
      total: 0,
      tableData: [],
      head: {
        refereerealname: "服务商姓名",
        refereeusername: "服务商手机号",
        refereerole_id: "服务商级别",
        order_id: "订单编号",
        pay_status: "订单状态",
        project_name: "名称",

        app_type: "所属模块",
        hospital_name: "机构名称",
        pay_amount: "支付金额",
        order_source: "报单类型",
        realname: "客户姓名",
        phone: "客户手机号",
        check_name: "核销人员",
        pay_date: "购买时间",
        verification_date: "核销时间"
      }
    };
  },
  watch: {
    dates1(val) {
      this.params.pay_date = val ? val[0] + " - " + val[1] : "";
    },
    dates(val) {
      this.params.use_time = val ? val[0] + " - " + val[1] : "";
    }
  },
  mounted() {
    this.list();
  },
  methods: {
    search() {
      console.log(this.$refs["table"].params);
      this.$refs["table"].params.page = 1;
      this.list();
    },
    async list() {
      let data = { ...this.params, ...this.$refs["table"].params };
      let res = await server_project_index(data);
      console.log(res);
      if (res.data.code == 200) {
        this.total = res.data.data.total;
        res.data.data.data.map(res => {
          res.hospital_name = res.hospital ? res.hospital.hospital_name : null;
          res.realname = res.user
            ? res.user.realname
              ? res.user.realname
              : res.user.nickname
            : null;
          res.check_name =
           ( res.check_name +
            (res.check_phone + "")).replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
          // console.log(res,66)
          for (let item in this.opts) {
            if (res.app_type == item) {
              res.app_type = this.opts[item];
            }
          }
          if (res.referee) {
            for (let i in res.referee) {
              res["referee" + i] = res.referee[i];
            }
          }

          for (let item in this.role) {
            if (res.refereerole_id == item) {
              res.refereerole_id = this.role[item];
            }
          }
          for (let item in this.pay) {
            if (res.pay_status == item) {
              res.pay_status = this.pay[item];
            }
          }
          for (let item in this.order_source) {
            if (res.order_source == item) {
              res.order_source = this.order_source[item];
            }
          }
        });
        this.tableData = res.data.data.data;
      }
    }
  }
};
</script>

<style scoped>
/* 分页 */
.pagesCon {
  height: 40px;
  margin-top: 20px;
}
.pagesCon > div {
  float: right;
}
/* 表单样式修改 */
.el-range-editor--medium.el-input__inner {
  width: 236px;
}
</style>